/* 
    创建 构造函数 实现 选项卡的面向对象编程

    参数1    生成选项卡的标签对象
    参数2    数据数组
    参数3    事件类型

*/
class SetTab {
    // 构造器 定义 构造函数的参数  
    // 实例化对象 存储的属性属性值
    // 构造器中定义的函数 只能在构造器中使用
    // 定义的函数方法 不能调用使用
    constructor(element, array, eventType) {
        // 定义属性 存储 参数的数据
        this.ele = element;
        this.arr = array;
        this.type = eventType;
        // 定义属性 存储 数据
        // 也就是 之前程序中的全局变量
        this.ul;
        this.ol;
        this.ulLi;
        this.olLi;
    }

    // 函数方法1 动态生成页面
    setPage() {

        // 创建 ul ol 标签节点
        // 将 创建的标签节点 存储到 已经定义好的属性中
        this.ul = document.createElement('ul');
        this.ol = document.createElement('ol');

        // 定义变量 存储 循环生成的li标签
        let ulLiStr = '';
        let olLiStr = '';

        // 循环遍历 数组 动态生成 ul>li ol>li
        this.arr.forEach(function (item, key) {
            // item 是 数组中存储数据的对象
            // key  是 当前对象的索引下标

            // 第一个ul>li 添加 class,active
            // 每一个ul>li 定义 name 和 index
            // name区别 ul>li 和 ol>li 
            // index 存储 当前 对象在数组中的索引下标
            ulLiStr += key === 0 ? `<li name="ulLi" index="${key}" class="active">${item.ulStr}</li>` : `<li name="ulLi" index="${key}">${item.ulStr}</li>`;

            // 第一个ol>li 添加 class,active
            olLiStr += key === 0 ? `<li class="active">${item.olStr}</li>` : `<li>${item.olStr}</li>`;

        })

        // 循环遍历结束 变量中存储 ul>li ol>li 字符串
        // 写入 ul ol 标签对象
        this.ul.innerHTML = ulLiStr;
        this.ol.innerHTML = olLiStr;

        // 将 ul ol标签 写入 div标签中
        this.ele.appendChild(this.ul);
        this.ele.appendChild(this.ol);

        // 获取 ul>li ol>li
        this.ulLi = this.ul.querySelectorAll('li');
        this.olLi = this.ol.querySelectorAll('li');
    }

    // 函数方法2 绑定事件
    setEvent() {
        // 构造函数中 this指向 默认是 new创建的对象 new,return的对象 实例化对象
        console.log(this);

        // 提前定义一个变量 存储 当期 this
        // 当前this 是 实例化对象 
        const _this = this ;

        // 以事件委托的形式 给 div标签绑定事件

        // 点击事件 父级程序 是 setEvent() 这个函数程序 
        // setEvent() 函数程序的this指向 是 实例化对象
        // 将 匿名函数 定义成 箭头函数 
        // 事件处理函数的this指向 就变成 父级程序setEvent() this指向 
        // 也就是 实例化对象
        this.ele.addEventListener( this.type , function(event)  {
            // 事件处理函数 this指向 默认是 事件源
            // 也就是 绑定事件的标签对象 
            // 不是 实例化对象
            // console.log( this );

            // // 使用 提前定义的变量中存储的实例化对象
            // console.log( _this );
            // console.log( _this.ulLi );


            // 如果 触发事件的标签 name 是 ulLi 触发事件执行
            if (event.target.getAttribute('name') === 'ulLi') {
                // 循环遍历 给 所有的 ul>li  ol>li 清除 class,active
                // console.log( this );

                // 构造函数中 数组.forEach() 函数this指向 默认是 undefined
                // 修改成箭头函数 this指向是父级程序的this指向
                this.ulLi.forEach((item, key) => {

                    // console.log(this);

                    // item 是 ul>li 标签 
                    // key  是 ul>li 标签的索引下标 也可以是 ol>li 标签标签的索引下标
                    item.classList.remove('active');
                    this.olLi[key].classList.remove('active');
                })

                // 给 触发事件的ul>li 添加 class,active
                event.target.classList.add('active');
                // 给 触发事件的ul>li 索引下标对应的 ol>li 添加 class,active
                this.olLi[Number(event.target.getAttribute('index'))].classList.add('active');

            }
        })
    }
}